<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Transform</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body>
    <div id="main" style="width:1024px;height:800px;"></div>

    <script type="text/javascript">
        let qr = QuarkRenderer.init(document.getElementById('main'));
        let circle=new QuarkRenderer.Rect({
            showTransformControls:true,
            isLinkable:true,
            draggable:true,
            position:[100,200],
            shape:{
                width:200,
                height:200
            },
            style:{
                fill:'#ff0000'
            }
        });
        qr.add(circle);

        let image = new QuarkRenderer.Image({
            showTransformControls:true,
            isLinkable:true,
            position: [450,200],
            scale: [1, 1],
            style: {
                image: './data/test.png',
                width: 200,
                height: 200
            },
            draggable: true
        });
        qr.add(image);

        let curve = new QuarkRenderer.BezierCurve({
            draggable: true,
            isCable:true,
            position: [0, 0],
            scale: [1, 1],
            shape: {
                x1: 10,
                y1: 400,
                x2: 300,
                y2: 30,
                cpx1: 0,
                cpy1: 0,
                cpx2: 0,
                cpy2: 0
            },
            style: {
                stroke: 'rgba(220, 20, 60, 0.8)',
                lineWidth: 5
            }
        });
        qr.add(curve);


        let points = [];
        for (let i = 0; i < 10; i++) {
            points.push([Math.random() * 800 + 300, Math.random() * 500 + 50]);
        }
        let polyline = new QuarkRenderer.Polyline({
            position: [100, 0],
            draggable: true,
            isCable:true,
            showTransformControls:true,
            style: {
                lineDash: [10, 10],
                stroke: 'rgba(220, 20, 60, 0.8)',
                lineWidth: 10
            },
            shape: {
                points:points,
                smooth: 0.5
            }
        });
        qr.add(polyline);
        polyline.animate()
            .when(1000, {
                style:{
                    lineDashOffset: 20
                }
            })
            .start(true);

        let line=new QuarkRenderer.Line({
            position: [150, 700],
            draggable: true,
            isCable:true,
            showTransformControls:true,
            style: {
                stroke: 'rgba(220, 20, 60, 0.8)',
                lineWidth: 5
            },
            shape: {
                x1: 0,
                y1: 0,
                x2: 500,
                y2: 0,
                percent: 1
            }
        });
        qr.add(line);
    </script>
</body>
</html>